<template>
  <div>
    <div class="details-container">
      <div class="child-inline-block details-header">
        <div>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item
              :to="{
                path: '/haier/commodity',
                query: { id: topic.tid, name: topic.name },
              }"
            >
              {{ topic.name }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{ topic.cid }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div>
          <haier-preview :images="images" />
        </div>
        <div class="details-header-right">
          <h1>{{ details.name }}</h1>
          <h2>{{ details.cid }}</h2>
          <div class="price">
            <span>参考价</span>
            <span>{{ details.price }}</span>
            <span
              >具体成交价格根据商品参加活动或会员使用优惠券、积分等发生变化，最终以各渠道订单结算页价格为准</span
            >
          </div>
          <div class="buy-btn" @click="buy">
            <span>在线购买</span>
          </div>
        </div>
      </div>
      <div class="details-tab">
        <el-tabs class="tab">
          <el-tab-pane>
            <span slot="label">产品介绍</span>
            <div></div>
          </el-tab-pane>
          <el-tab-pane>
            <span slot="label">规格参数 </span>
            <div>
              <div>
                <img src="" alt="" />
              </div>
              <el-collapse>
                <el-collapse-item>
                  <haier-table :data="specData" />
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-tab-pane>
          <el-tab-pane>
            <span slot="label">用户口碑</span>
            <div></div>
          </el-tab-pane>
          <el-tab-pane>
            <span slot="label">服务支持</span>
            <div></div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
/*eslint-disable */
import Preview from "@/components/ImagePreview.vue";
import List from "@/components/List.vue";

import pimg from "@/components/productimg";
import navlist from "@/assets/secondnav.json";
import Haier from "./Haier.vue";

export default {
  data() {
    return {
      topic: {},
      details: {},
      images: [],
      specData: [
        {
          label: "测试",
          value: 1,
        },
        {
          label: "测试",
          value: 1,
        },
        {
          label: "测试",
          value: 1,
        },
        {
          label: "测试",
          value: 1,
        },
        {
          label: "测试",
          value: 1,
        },
      ],
      BottomNav: navlist,
      mapping: {
        label: "name",
      },
    };
  },
  methods: {
    loadDetails() {
      this.$haier
        .get(`openapi/commodity/${this.topic.cid}`)
        .then(({ data }) => {
          this.details = data;
          try {
            this.images = Array.from(data.assets[1]).map((assets) => {
              return {
                url: this.$getImgURI(assets),
              };
            });
          } catch (error) {
            this.images = [];
          }
          console.log(this.images);
        });
    },
    buy() {
      this.$haier
        .post("openapi/shopping", {
          cid: this.details.cid,
        })
        .then(() => {
          this.$router.push("/haier/shoppingcar");
        })
        .catch((res) => {
          if (res.status == 2030) {
            this.$router.push("/login");
          }
        });
    },
  },
  created() {
    this.topic = this.$route.query;
    this.loadDetails();
  },
  components: {
    "haier-preview": Preview,
    "haier-table": List,
  },
};
</script>

<style scoped>
.details-container {
  margin: 0 auto;
  background: #f0f1f4;
}

.details-header {
  position: relative;
  height: 600px;
  width: 80%;
  padding-top: 50px;
  margin: 0 auto;
}

.details-header > div {
  position: absolute;
  width: 50%;
  height: 100%;
}

.details-header > div:first-child {
  text-align: center;
}

.details-header > div:nth-child(2) {
  position: absolute;
  top: 10%;
}

.details-header-right {
  top: 25%;
  left: 55%;
}

.details-header-right h2 {
  color: #444;
  padding-top: 2px;
  font-size: 1.2em;
}

.details-header-right .price {
  margin-top: 10%;
}

.details-header-right .buy-btn {
  margin-top: 8%;
}

.price {
  display: block;
}

.price span:first-child {
  font-size: 1em;
}

.price span:nth-child(2) {
  display: inline-block;
  font-size: 2em;
  text-indent: 10px;
}

.price span:last-child {
  display: block;
  width: 300px;
  color: gray;
  font-size: 0.8em;
}

.buy-btn {
  background: #0c5ca8;
  width: 150px;
  color: white;
  border-radius: 20px;
  text-align: center;
  padding: 10px;
  cursor: pointer;
}

.details-tab {
  background: white;
}

.details-tab > :first-child {
  width: 80%;
  margin: 0 auto;
}
</style>